<template>

    <div>

        <h3>这是报修页面</h3>

        <el-input v-model="query.title" clearable placeholder="模糊查询" style="width: 200px;"></el-input>
        <el-button type="primary" @click="toAdd">添加</el-button>

        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名">
            </el-table-column>

            <el-table-column
                    prop="bname"
                    label="当前楼栋">
            </el-table-column>
            <el-table-column
                    prop="rname"
                    label="当前房间">
            </el-table-column>
            <el-table-column
                    prop="currentNum"
                    label="当前床位">
            </el-table-column>


            <el-table-column
                    prop="title"
                    label="申请信息">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="申请状态">
            </el-table-column>

            <el-table-column
                    prop="applyTime"
                    label="申请时间">
            </el-table-column>
            <el-table-column
                    prop="operateTime"
                    label="操作时间">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="showDetail(scope.row)">查看</el-button>
                    <el-button type="text" size="small" @click="delOne(scope.row.id)">删除</el-button>
                    <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="shenhe(scope.row.id,'通过')">通过</el-button>
                    <el-button type="text" size="small" @click="shenhe(scope.row.id,'拒绝')">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>




        <el-dialog :title="mode.title" :visible.sync="dialogFormVisible4Detail">

            <div>

                <el-form :model="form">
                    <el-form-item label="报修标题" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addBaoxiu">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="申请详情" :visible.sync="dialogFormVisible4Detail66666">

            <div>

                <p>{{detail.sname}}</p>
                <p>{{detail.bname}}</p>
                <p>{{detail.rname}}</p>
                <p>{{detail.currentNum}}</p>
                <p>{{detail.state}}</p>
                <p>{{detail.title}}</p>
                <p>{{detail.createTime}}</p>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible4Detail66666=false">确 定</el-button>
            </div>
        </el-dialog>





        <el-dialog title="原因填写" :visible.sync="dialogFormVisible4Shene">

            <div>

                <el-form :model="shenheObj">
                    <el-form-item label="原因" :label-width="formLabelWidth">
                        <el-input v-model="shenheObj.remark" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>

            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="changeState">确 定</el-button>
            </div>
        </el-dialog>



    </div>

</template>

<script>
    export default {
        name: "baoxiu",
        data(){
            return {
                user:{},
                tableData:[],
                total:0,
                query:{
                    page:1,
                    pageSize:2,
                    title:""
                },
                dialogFormVisible4Detail:false,
                form:{
                    sid:"",
                    bid:"",
                    rid:"",
                    currentNum:"",
                    state:"处理中",
                    title:"",
                },
                formLabelWidth:"120px",
                currentStuRoomInfo:{},
                mode:{
                    title:"",
                    url:""
                },

                dialogFormVisible4Detail66666:false,
                detail:{},


                shenheObj:{
                    state:"",
                    id:"",
                    remark:"",
                },
                dialogFormVisible4Shene:false




            }
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData();
                }

            }
        },
        methods:{
            changeState(){
                this.axios.post("/sushestu/repair-record/changeState",this.shenheObj).then(res=>{
                    this.$message.success("成功")
                    this.shenheObj = {
                        state:"",
                        id:"",
                        remark:"",
                    }
                    this.dialogFormVisible4Shene = false;
                    this.initData();
                })
            },
            shenhe(id,state){

                this.shenheObj.id = id;
                this.shenheObj.state = state;

                this.dialogFormVisible4Shene = true

            },
            toEdit(row){
                this.mode = {
                    title:"报修申请--修改",
                    url:"/sushestu/repair-record/update"
                }
                this.form = JSON.parse(JSON.stringify(row));
                this.dialogFormVisible4Detail = true;

            },
            delOne(id){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post("/sushestu/repair-record/deleteOne?id="+id).then(res=>{
                        this.$message.success("成功")
                        this.initData();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            showDetail(row){
                this.dialogFormVisible4Detail66666 = true;
                this.detail = row;

            },
            initStuCurrentRoonInfo(){//查询当前学生的住宿信息
                this.axios.post("/sushestu/stu-room/findBySid?sid="+this.user.id).then(res=>{
                    this.currentStuRoomInfo = res.data.data;
                })
            },
            addBaoxiu(){

                this.form.sid = this.user.id;
                this.form.bid = this.currentStuRoomInfo.bid;
                this.form.rid = this.currentStuRoomInfo.rid;
                this.form.currentNum = this.currentStuRoomInfo.num;
                this.axios.post(this.mode.url,this.form).then(res=>{
                    this.$message.success("成功")
                    this.form.title = "";
                    this.dialogFormVisible4Detail = false;
                    this.initData();
                })


            },
            toAdd(){
                this.mode = {
                    title:"报修申请",
                    url:"/sushestu/repair-record/add"
                }
                this.dialogFormVisible4Detail = true;
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            initData(){
                this.axios.post(`/sushestu/repair-record/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.tableData = res.data.data.records;
                    this.total = res.data.data.total;
                    if(this.tableData.length==0&&this.query.page>1){
                        this.query.page--
                    }
                })
            }

        },
        created(){

            let user = localStorage.getItem("sushe_user")
            this.user = JSON.parse(user);
            this.initData()
            this.initStuCurrentRoonInfo();
        }
    }
</script>

<style scoped>

</style>
